<template>
    <div>
        <indexheader></indexheader>
        <div class="show-center">
            作品展示
        </div>
        <div class="show-line">

        </div>
        <div class="show-author" style="text-align: center">
            ui设计师 - 陈阳
        </div>
        <div class="show-first">
            <div class="level-1-1-block">
                <a href="./yishang.html">
                    <img id="show1"  :src="img.bg_1_1" alt="">
                    <img class="show-msg"  :src="img.center_1_1" alt="">
                </a>


            </div>
            <div class="level-1-2-block">
                <a href="./yuexiang.html">
                    <img id="show2"  :src="img.bg_1_2" alt="">
                    <img class="show-msg"  :src="img.center_1_2" alt="">
                </a>

            </div>

            <div class="level-1-3-block">
                <a href="./community.html">
                    <img  id="show3"  :src="img.bg_1_3" alt="">
                    <img class="show-msg"  :src="img.center_1_3" alt="">
                </a>
            </div>
        </div>
        <div class="show-second">
            <div class="level-2-1-block">
                <a href="./detail.html">
                    <img id="show4"  :src="img.bg_2_1" alt="">
                    <img class="show2-1-msg"  :src="img.center_2_1"  alt="">
                </a>

            </div>
            <div class="level-2-2-block">
                <a href="./icon.html">
                    <img id="show5"  :src="img.bg_2_2" alt="">
                    <img class="show2-2-msg"  :src="img.center_2_2" alt="">
                </a>


            </div>
        </div>
    </div>

</template>



<script>
    import indexheader from './layout/indexheader'
    export default {
        components: {
            indexheader
        },
        data(){
            return{
                img:{
                    bg_1_1:'http://www.zzaweb.cn/design/pic/bg-1-min.png',
                    bg_1_2:'http://www.zzaweb.cn/design/pic/bg-2-min.png',
                    bg_1_3:'http://www.zzaweb.cn/design/pic/bg-3-min.png',
                    bg_2_1:'http://www.zzaweb.cn/design/pic/bg-4-min.png',
                    bg_2_2:'http://www.zzaweb.cn/design/pic/bg-5-min.png',
                    center_1_1:'http://www.zzaweb.cn/design/pic/1-min.png',
                    center_1_2:'http://www.zzaweb.cn/design/pic/2-min.png',
                    center_1_3:'http://www.zzaweb.cn/design/pic/3-min.png',
                    center_2_1:'http://www.zzaweb.cn/design/pic/4-min.png',
                    center_2_2:'http://www.zzaweb.cn/design/pic/5-min.png',
                }

            }
        }
    }
</script>
<style>
    .show-center{
        /* width: 237px; */
        padding: 0px;
        height: 45px;
        font-family: SourceSansPro-Regular;
        font-size:36px;
        margin:0 auto;
        padding-top:265px;
        text-align: center
    }
    .show-line{
        border:#979797 solid 1px;
        margin: 0 auto;
        width: 130px;
        margin-top:15px;
    }
    .show-author{
        margin: 0 auto;
        margin-top:15px;
        font-size: PingFangSC-Regular;
        width:199px;
        height: 22px;
        font-size: 16px;
        color: #666666

    }

    .show-first{
        height: 423px;
        width:1270px;
        margin: 0 auto;
        margin-top: 60px;
    }
    .level-1-1-block{
        width:423px;
        float: left;
        margin: auto;
        text-align: center;
        position: relative;
        display: none;

    }
    .level-1-2-block{
        width:423px;
        float: left;
        text-align: center;
        position: relative;
        display: none;


    }
    .level-1-3-block{
        width:423px;
        float: left;
        text-align: center;
        position: relative;
        display: none;



    }
    .show-second{
        position: relative;
        height: 423px;
        width:846px;
        margin: 0 auto;
        margin-top: 60px;
        margin-top: -50px;

    }
    .level-2-1-block{
        position: absolute;
        width:423px;
        text-align: center;
        float: left;
        display: none;

    }
    .level-2-2-block{
        position: absolute;
        left: 423px;
        width:423px;
        float: left;
        text-align: center;
        display: none;


    }
    #show1{
        width: auto;
        height: 423px;
        margin: auto;
    }

    #show2{
        width: auto;
        height: 423px;
        margin: auto;

    }
    #show3{
        width: auto;
        height: 423px;
        margin: auto;

    }
    #show4{
        width: auto;
        height: 423px;
        margin: auto;

    }
    #show5{
        width: auto;
        height: 423px;
        margin: auto;

    }
    .show-msg{
        position:absolute;
        width: 160px;
        height: 160px;
        left: 131px;
        top: 131px;
        /* display: none; */
    }
    .show2-1-msg{
        position:absolute;
        width: 160px;
        height: 160px;
        left: 131px;
        top: 131px;
    }
    .show2-2-msg{
        position:absolute;
        width: 160px;
        height: 160px;
        right: 131px;
        top: 131px;
    }
    .show-msg {
        cursor: pointer;
        transition: all 0.5s;
    }
    .show2-1-msg {
        cursor: pointer;
        transition: all 0.5s;
    }
    .show2-2-msg {
        cursor: pointer;
        transition: all 0.5s;
    }
    .show-msg:hover{
        transform: scale(1.1);
    }
    .show2-1-msg:hover{
        transform: scale(1.1);
    }
    .show2-2-msg:hover{
        transform: scale(1.1);
    }
</style>
